<template>
	<view class="popup-layout-wrap " :class="popuplayoutClass">
		<view class="popup-layout-content" :class="popupContentClass" :style="[{height:height}]">
			<view class="link-address-wrap">
				<view class="link-adress-content">
					<view class="head-wrap">
						<text class="cancel" @click="btn_cancel">取消</text>
						<text class="confirm" @click="btn_confirm">确认</text>
					</view>
					<view class="head-selected">
						<text class="selected-txt">已选择:{{selected_address}}</text>
					</view>
					<view class="operation-wrap">
						<view class="operation-container">
							<view class="operation-content" v-for="(base_items,base_index) of linkAddress_area">
								<scroll-view scroll-y="true" class="province" show-scrollbar="false">
									<view @click="choosefun(base_items.clickfun,items)" v-model="items.id" v-for="(items , index) of base_items.info"
									 :class="[index==base_items.current ? 'province-txt-click' : 'province-txt']">
										{{items.AREA_NAME}}
										<view class="pic" v-show="index===base_items.current">
											<image src="../../static/image/yes.png"></image>
										</view>
									</view>
								</scroll-view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="maskShow" class="popup-layout-mask" @tap="close(maskClick)"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				newActive: "",
				newTransition: true,
				//省0市1区2
				linkAddress_area: [{
						current: null,
						info: [],
						clickfun: 'province_txt_click'
					},
					{
						current: null,
						info: [],
						clickfun: 'city_txt_click'
					}
				],
				/*请求提交的*/
				submission: {
					province: '', //省
					city: '', //市
					county: '', //区
					town: '' //镇
				},
				/*用户选择的地址*/
				user_address: {
					province: '', //省
					city: '', //市
					district: '' //区		
				},
				selected_address: ''
			};
		},
		props: {
			 IS_ALL:{
				 type:String,
				 default: ""
			}, 
			initProvince: {
				type: Array
			},
			/*底部弹窗的属性*/
			active: {
				type: Boolean,
				default: false
			},
			height: {
				type: [String],
				default: "100%"
			},
			//遮盖层显示
			maskShow: {
				type: Boolean,
				default: true
			},
			//遮盖层点击
			maskClick: {
				type: Boolean,
				default: true
			},
			//回掉
			callback: {
				type: Function,
				default: function() {

				}
			},
		},
		computed: {
			popuplayoutClass: function() {
				let _class = "";
				if (this.newActive) {
					_class += "popup-layout-active";
				}
				_class += " popup-layout-bottom";
				return _class;
			},
			popupContentClass: function() {
				let _class = "";
				if (this.newTransition && this.transition !== 'none') {
					_class += "popup-layout-transition-slider"
				}
				return _class;
			}
		},
		methods: {
			//显示弹窗
			show: function() {
				//提交的数据置为空
				this.submission = {
					province: '',
					city: '',
					county: '',
					town: ''
				}
				let _this = this;
	
				if (this.initProvince && this.initProvince.length > 0) {
					_this.submission.province = '1';
					_this.linkAddress_area[0].info = this.initProvince
				} else {
					//请求市数据
					this.$request('S1012', {
							"AREA_CODE": '',"IS_ALL":this.IS_ALL
						}, 'POST',
						function(res) {
							_this.submission.province = '1';
							_this.linkAddress_area[0].info = res.data.DATA
						}
					)
				}


				this.newActive = true;

				setTimeout(function() {
					_this.newTransition = false;
				}, 50)
			},

			//关闭弹窗
			close: function(v) {
				let close = v || true;
				if (close) {
					this.newTransition = true;
					let _this = this;
					setTimeout(function() {
						_this.newActive = false;

					}, 300)
				}

			},
			//选择点击事件
			choosefun(targetfun, targetid) {
				this[targetfun](targetid);
			},
			//省点击选择
			province_txt_click(target) {
				//区数据置为空

				//市、区的选择计数置为null
				this.linkAddress_area[1].current = null;

				let province;
				//得到点击的数据，改变样式
				for (let i = 0; i < this.linkAddress_area[0].info.length; i++) {
					if (this.linkAddress_area[0].info[i].AREA_CODE === target.AREA_CODE) {
						this.linkAddress_area[0].current = i;
						province = this.linkAddress_area[0].info[i];
						break;
					}
				}
				//用户选择
				this.user_address = {
					province: province,
					city: '',
					district: ''
				}
				//请求提交的数据先置为空
				this.submission = {
					province: '',
					city: '',
					county: '',
					town: ''
				};
				//再赋值
				this.submission.province = target;
				this.selected_address = this.user_address.province.AREA_NAME;

				//请求市数据
				let _this = this;
				this.$request('S1012', {
						"AREA_CODE": province.AREA_CODE,"IS_ALL":this.IS_ALL
					}, 'POST',
					function(res) {
						_this.linkAddress_area[1].info = res.data.DATA
					}
				)
			},

			//市点击选择
			city_txt_click(target) {

				let city;
				//得到点击的数据，改变样式
				for (let i = 0; i < this.linkAddress_area[1].info.length; i++) {
					if (this.linkAddress_area[1].info[i].AREA_CODE === target.AREA_CODE) {
						this.linkAddress_area[1].current = i;
						city = this.linkAddress_area[1].info[i];
						break;
					}
				}

				//得到市
				this.user_address.city = city;

				this.submission.city = target;

				this.selected_address = this.user_address.province.AREA_NAME + "-" + this.user_address.city.AREA_NAME;

			},

			//取消按钮
			btn_cancel: function() {
				this.close();

				//全部置为空
				this.submission = {
					province: '',
					city: '',
					county: '',
					town: ''
				}
				this.linkAddress_area[0].info = [];
				this.linkAddress_area[1].info = [];
				this.linkAddress_area[0].current = null;
				this.linkAddress_area[1].current = null;

				this.selected_address = '';
			},
			//确定按钮
			btn_confirm: function() {

				var pIndex = this.linkAddress_area[0].current;
				var cIndex = this.linkAddress_area[1].current;
				var select = []
				if (pIndex != null) {
					select.push(this.linkAddress_area[0].info[pIndex])
				}
				if (cIndex != null) {
					select.push(this.linkAddress_area[1].info[cIndex])
				}
				this.close();
				this.$emit('confirmCallback', select);
			}
		},
	}
</script>

<style lang="scss">
	popup-layout-wrap {
		position: absolute;
	}

	.popup-layout-wrap {
		position: fixed;
		z-index: 998;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		height: 100%;
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: center;
		align-items: center;
		display: none;

		&.popup-layout-active {
			display: flex;
		}

		&.popup-layout-bottom {
			align-items: flex-end;

			.popup-layout-transition-slider {
				transform: translate3d(0, 100%, 0);
			}
		}

		.popup-layout-content {
			background-color: #fff;
			z-index: 2;
			height: 100%;
			width: 100%;
			display: flex;
			flex-flow: row nowrap;
			justify-content: center;
			align-items: center;
			transform: translate3d(0, 0, 0) scale(1);
			opacity: 1;
			transition: transform .3s ease-in-out, opacity .3s ease-in-out;

			&.popup-layout-transition-fade {
				transform: translate3d(0, 0, 0) scale(0.3);
				opacity: 0;
			}
		}

		.popup-layout-mask {
			position: absolute;
			transition: all 1s;
			z-index: 1;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			height: 100%;
			width: 100%;
			background-color: rgba(#000, 0.6);
		}
	}

	/***省市区选择器***/
	.link-address-wrap {
		height: 100%;
		width: 100%;
		background: #fff;
	}

	.link-address-wrap .link-adress-content {
		margin: 8px 10px 10px 10px;

		.head-wrap {
			padding-bottom: 5px;
			display: flex;
			flex-direction: row;
			position: relative;

			.cancel {
				color: #999;
			}

			.confirm {
				position: absolute;
				right: 0px;
			}
		}

		.head-selected {
			text-align: center;
			color: #ccc;
			font-size: 17px;
		}

		.operation-wrap {
			.operation-container {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;

				.operation-content {
					display: flex;
					flex-direction: column;
					width: 45.333%;

					.province {
						//scroll-view区域的固定高度
						height: 420rpx;
						font-size: 17px;

						.province-txt {
							margin: 18px 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}

						.province-txt-click {
							margin: 18px 12px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							color: red;
							font-size: 20px;
							display: flex;
							flex-direction: row;

							.pic {
								padding-left: 15rpx;
								width: 30rpx;
								height: 30rpx;
								display: flex;
								justify-content: center;
								text-align: center;
								margin: auto 0;

								image {
									width: 100%;
									height: auto;
								}
							}
						}
					}
				}
			}
		}
	}
</style>
